<template>
  <!-- 顶部标题 -->
  <view class="Login">
    <view class="Login1">
      <view class="Login1-2">
        <image class="logo" src="@/static/log/LoginLogo.png" @click="tiaozuan"></image>
        <!-- <img src="/src/static/log/LoginLogo.png" alt="" /> -->
      </view>
      <view class="Login1-3">
        <text class="Login1-3-text">防差错配料系统</text>
      </view>
      <view class="Login1-4">
        <view class="Login1-4-0">
          <view class="Login1-4-1">
            <!-- <uni-easyinput type="password" 
							></uni-easyinput> -->
            <uni-easyinput v-model="use" class="custom-input" placeholder="请输入账号" primaryColor="#C4C4CC"
              :inputBorder="false" placeholderStyle="
                font-size: 20px;
                color: #999;
              " :style="{
                width: '400px',
                height: '50px',
                'border-radius': '20px',
                border: '1px solid #ccc',
              }" :styles="{
                'font-size': '20px',
                width: '400px',
                height: '50px',

              }"></uni-easyinput>
          </view>
          <view class="Login1-4-1">
            <uni-easyinput type="password" v-model="pad" placeholder="请输入密码" primaryColor="#C4C4CC" :clearable="false"
              :inputBorder="false" placeholderStyle="
                font-size: 20px;
                color: #999;
              " :style="{
                width: '400px',
                height: '50px',
                'border-radius': '20px',
                border: '1px solid #ccc',
              }" :styles="{
                width: '400px',
                height: '50px',
                'font-size': '20px',

              }"></uni-easyinput>
          </view>
        </view>
      </view>
      <view class="Login1-5">
        <checkbox-group>
          <checkbox value="psw" color="#09CC86" />记住账号密码
        </checkbox-group>
      </view>
      <view class="Login1-6">
        <button class="Login1-6-button" @click="login">登录</button>
      </view>
      <view class="Login1-7">
        <view class="Login1-7-1">
          <image src="@/static/icon/system2.png" style="width: 17px; height: 17px; margin-right: 5px"></image>
          <view class="Login1-7-text1"> 忘记密码</view>
        </view>
        <view class="Login1-7-3">|</view>
        <view class="Login1-7-2">
          <image src="@/static/icon/system3.png" style="width: 30px; height: 30px"></image>
          <view class="Login1-7-text2">注册账号</view>
        </view>
      </view>
    </view>
    <view class="Login1-8">
      <view class="Login1-8-1"> </view>
      <view class="Login1-8-2">
        <view class="Login1-8-2-1">技术支持：生产部iT组</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue';

//用于跳转到另一个登录页
const tiaozuan=()=>{
  // uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
  uni.navigateTo({
    url: '/pages/Login/Login2' 
  });
}
// 定义账号密码响应式变量，用于双向绑定输入框
let use = ref<string>(""); // 账号输入框绑定变量
let pad = ref<string>(""); // 密码输入框绑定变量
let loading = ref<boolean>(false); // 登录按钮加载状态

/**
 * 登录功能实现
 * 1. 接口请求：像快递员送信一样，把账号密码打包发给服务器（后端接口）
 * 2. 服务器处理：验证账号密码是否正确，返回结果
 * 3. 客户端处理：根据结果跳转到首页或显示错误
 */
const login = async () => {
  // 简单验证：检查账号密码是否为空
  if (!use.value || !pad.value) {
    uni.showToast({ title: '账号密码不能为空', icon: 'none' });
    return;
  }
   // 创建FormData对象（像快递打包箱，专门用来装表单数据）
  let formData = new FormData();
  formData.append('account', use.value); // # 添加账号参数（对应Curl的-F account=xxx）
  formData.append('password', pad.value); // # 添加密码参数（对应Curl的-F password=xxx）
  console.log("账号" + use.value, "密码" + pad.value)
  // 发送登录请求（像寄快递一样把账号密码发给服务器）
  // 使用try-catch包裹网络请求，捕获可能的错误
  try {

    // ✅ 修复：uni.request返回的是Promise对象，成功时直接获取响应对象
    // 就像快递服务：成功收到包裹(响应)，失败则触发catch
    const response = await uni.request({
      url: 'http://localhost:5079/JWT/Login', // 替换为实际接口地址
      method: 'POST',
      header: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" // # 像寄快递时填写"内物详情"，告诉服务器这是JSON格式数据
      },
      data: {
        account:use.value,
        password:pad.value
      },
      timeout: 5000
    });
    console.log("返回" + JSON.stringify(response));

    const responseData = response.data;
    if (typeof responseData === 'object' && responseData !== null) {
      if ('token' in responseData) {
        uni.setStorageSync('token', responseData.token);
      }
      uni.navigateTo({ url: '/pages/Login/Hone' });
    } else {
      if (typeof responseData === 'object' && responseData !== null && 'msg' in responseData) {
        if ('msg' in responseData) {
          uni.showToast({ title: (responseData as { msg: string }).msg, icon: 'none' });
        }

      } else {
        uni.showToast({ title: '登录失败', icon: 'none' });
      }
    }
  } catch (err) {
    // ❌ 捕获网络错误（快递丢失/网络中断）
    uni.showToast({ title: '网络连接失败，请检查网络', icon: 'none' });
    console.error('网络错误详情:', err);
  } finally {
    loading.value = false; // 无论成功失败，关闭加载状态
  }
};
</script>

<style scoped>
.Login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* margin-top: 40px; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /* justify-content: center; */
  min-height: 100vh;
  background-color: #F7FDFF;
  /* background-image: url("/src/static/log/Loginbg3.png"); */
  background-size: 100% 100%;
}

.Login1 {
  /* background-color: #f8f3f1; */
  width: 400px;
  height: 500px;
  margin-top: 77px;
  border-radius: 20px;
  opacity: 1;
  /* 0~1之间，越小越透明 */
}

.Login1-2 {
  /* background-color: darkcyan; */
  height: 125px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.logo {
  /* margin: 5px 5px; */

  width: 300px;
  height: 80px;
  border-radius: 20px;
}

.Login1-3 {
  display: flex;
  /* background-color: aqua; */
  width: 100%;
  height: 75px;
  /* 垂直居中 */
  /* align-items: center;  */
  justify-content: center;
  /* 水平居中 */
}

.Login1-3-text {
  /* font-size: 32rpx; */
  font-size: 25px;
  color: #536d6c;
  transform: scaleX(1.2);
  /* 水平方向拉长1.5倍 */
  letter-spacing: 2px;
}

.Login1-4 {
  /* background-color: mediumseagreen; */
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
  /* 水平居中 */
}

.Login1-4-0 {
  /* background-color: #fff; */
  width: 100%;
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 水平居中 */
  /* flex-direction: row; */
}

.Login1-4-1 {
  /* background-color: red; */
  width: 80%;
  height: 64px;
  /* display: flex; */
}

.Login1-5 {
  /* background-color: peru; */
  height: 50px;
  padding-top: 15px;
  padding-left: 25px;
}

/deep/ .uni-checkbox-input {
  border-radius: 50% !important;
}

.Login1-6 {
  /* background-color: bisque; */
  width: 100%;
  height: 15%;
}

.Login1-6-button {
  width: 400px;
  height: 55px;
  background-color: #4c73ee;
  border-radius: 20px;
  font-size: 30px;
  line-height: 55px;
  color: #fff;
}

.Login1-7 {
  /* background-color: darkcyan; */
  height: 50px;
  display: flex;
  justify-content: space-between;
  /* 两个子元素之间的间距 */
}

.Login1-7-1 {
  width: 155px;
  height: 50px;
  /* background-color: greern; */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* 两个子元素之间的间距 */
  /* justify-content: space-between;  */

  justify-content: flex-end;
}

.Login1-7-3 {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  width: 16px;
  height: 50px;
}

.Login1-7-2 {
  width: 155px;
  height: 50px;
  background-color: greern;
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

.Login1-7-text1 {
  margin-right: 11px;
  font-size: 20px;
}

.Login1-7-text2 {
  font-size: 20px;
}

.Login1-8 {
  /* margin-top: 150px; */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 150px;
  background-image:
    url("/src/static/log/bouutpm.png"),
    /* 图片现在在最上层 */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 50%, #4c73ee 50%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* display: flex; */
  justify-content: center;
  /* 水平居中 */

}

.Login1-8-1 {
  width: 100%;
  height: 60px;
  /* background-color: gerren; */

}

.Login1-8-2 {
  width: 100%;
  height: 80px;
  /* background-color: gerren; */

}

.Login1-8-2-1 {
  margin-top: 20px;
  margin-left: 35px;
  font-size: 23px;
  color: #fff;
  text-align: center;
}
</style>
